<template>
	<view>
		<view class="head">
			<view class="arrow" @click="return_btn">
			</view>
			<text style="color: white; font-size: 48rpx;">注册</text>
			<uni-card>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: bold;">负责人：</view>
					<view>
						<u--input placeholder="输入负责人名字" customStyle="width: 90%;" v-model="registerForm.perName"></u--input>
					</view>
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">身份证号码：</view>
					<view>
						<u--input placeholder="输入身份证号码" customStyle="width: 90%;" v-model="registerForm.perCardid"></u--input>
					</view>
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">手机号：</view>
					<view>
						<u--input placeholder="输入手机号" customStyle="width: 90%;" v-model="registerForm.perPhone"></u--input>
					</view>
				</view>
				<view class="registerItem" style="position: relative;">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">验证码：</view>
					<view>
						<u--input placeholder="输入验证码" customStyle="width: 90%;" v-model="code"></u--input>
					</view>
					<img :src="codeUrl" @click="getCode" style="width: 200rpx; height: 60rpx;"/>
					<!-- <view class="getyanzehngma" @click="getPhoneCode">获取验证码</view>	 -->
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">店名：</view>
					<view>
						<u--input placeholder="输入店名" customStyle="width: 90%;" v-model="registerForm.storeName"></u--input>
					</view>
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">工商营业执照号码：</view>
					<view style="">
						<u--input placeholder="输入营业执照号码" customStyle=" width: 90%;margin-right: -50rpx;" v-model="registerForm.number"></u--input>
					</view>
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">经营地址：</view>
					<view style="width: 61%;">
						<uni-data-picker placeholder="请选择区县" popup-title="请选择" :localdata="dataTree" shape="circle"
							v-model="registerForm.area" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" >
						</uni-data-picker>
					</view>
				</view>
				<view class="registerItem">
					<view style="line-height: 80rpx;font-size: 26rpx;font-weight: 600;">地址：</view>
					<view>
						<u--input placeholder="请输入详细地址" customStyle="width: 90%;" v-model="registerForm.address"></u--input>
					</view>
				</view>
			</uni-card>
			<uni-card>
				<view class="title">商家简介</view>
				<uni-easyinput type="textarea" placeholder="请准确的介绍一下公司的情况" v-model="registerForm.intro"></uni-easyinput>
			</uni-card>
			<uni-card>
				<view class="title1">
					身份证正反面照片
				</view>
				<uni-file-picker limit="2" title="上传身份证正反面照片" @change="handleIdCardChange"></uni-file-picker>
			</uni-card>
			<uni-card>
				<view class="title">营业执照</view>
				<uni-file-picker  @change="handleBusinessLicenseChange"></uni-file-picker>
			</uni-card>
			<uni-card>
				<view class="title">门店 照片</view>
				<uni-file-picker @change="handleStorePhotosChange"></uni-file-picker>
			</uni-card>
			<uni-card>
				<u-button type="primary" @click="register_btn">注册</u-button>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeUrl:'',
				idCardPhotos: [], // 存储身份证正反面照片
				businessLicense: null, // 存储营业执照照片
				storePhotos: [], // 存储门店照片
				code:'',
				uuid:'',
				registerForm: {
					name: "",
					number: "",
					area: "",
					address: "",
					intro: "",
					audit: "",
					creatTime: "",
					licence: "",
					cardFront: "",
					cardBack: "",
					money: "",
					accIncome: "",
					accOut: "",
					perName: "",
					perPhone: "",
					perPasword: "",
					perCardid: "",
					deleted: "",
					storeName: "",
					week:"",
					startTime: "",
					endTime: "",
					longitude: "",
					latitude: "",
					star: "",
					sales: "",
					userId: ""
				},
				
				address: "1-1",
				dataTree: [{
						text: "郑州市",
						value: "1-0",
						children: [{
								text: "高新区",
								value: "1-1"
							},
							{
								text: "金水区",
								value: "1-2"
							}
						]
					},
					{
						text: "周口市",
						value: "2-0",
						children: [{
								text: "川汇区",
								value: "2-1"
							},
							{
								text: "淮阳区",
								value: "2-2"
							}
						]
					}
				]
			}
		},
		onload(){
			this.getCode()
		},
		methods: {
			return_btn() {
				uni.$u.route('/pages/ys/login/login')
			},
			register_btn() {
				let that = this;
				this.$http({
					url:'/api/shop/register/regist',
					method:'POST',
					data:this.registerForm,
					success(res) {
						console.log(res)
						if(res.data.code == 200){
							alert("注册成功")
							uni.$u.route('/pages/ys/login/login')
							// let form = {
							// 	username:res.data.data.name,
							// 	password:res.data.data.perPasword,
							// 	code:that.code,
							// 	uuid:that.uuid
							// }
							// that.$http({
							// 	url:'/api/auth/register',
							// 	method:'POST',
							// 	data:form,
							// 	success(res){
							// 		// console.log(res)
							// 		// 如果登录成功，则需要把token保存到本地
							// 		if(res.data.code==200){
										
							// 			alert("注册成功")
										
							// 		}else{
							// 			alert('注册失败！')
							// 		}
							// 	}
									
							// })
						}else{
							alert("注册失败！")
						}
						
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			
			// 获取验证码函数
			getCode(){
				// 直接从原型链中获取封装好的request对象即可
				let that = this;
				this.$http({
					url:'/api/code',
					method:'GET',
					success(res){
						console.log(res);
						that.codeUrl = "data:image/gif;base64," + res.data.img;
						// console.log(that.codeUrl)
						// console.log(res.data.uuid)
						that.uuid = res.data.uuid;
					}
				})
			},
			handleIdCardChange(event) {
			        this.idCardPhotos = event.files; // 假设event.files包含了选中的文件列表
			    },
			    handleBusinessLicenseChange(event) {
			        // 如果只允许上传一个文件，可以直接赋值，否则可以推入数组
			        this.businessLicense = event.files.length ? event.files[0] : null;
			    },
			    handleStorePhotosChange(event) {
			        this.storePhotos = event.files; // 假设event.files包含了选中的文件列表
			    },
		}
	}
</script>

<style>
	.title1 {
		margin-left: -330rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
		font-size: 36rpx;
	}

	.title {
		margin-left: -470rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
		font-size: 36rpx;
	}

	.getyanzehngma {
		position: absolute;
		border-left: 1rpx solid grey;
		right: 4vw;
		top: 14rpx;
		padding-left: 8rpx;
		color: #387BEF;
		font-weight: 700;
	}

	.registerItem {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		margin-left: -10rpx;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: fixed;
		left: 3vw;
		top: 4vh;
	}

	.head {
		padding-top: 4vh;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>